<script lang="ts" setup>
import { ref, inject, reactive, watch, onMounted,onUnmounted  } from 'vue';  // 引入 ref
import { useRouter } from 'vue-router'; // 引入 useRouter
import { FormInstance, FormRules, ComponentSize, ElMessage } from 'element-plus'
import { pa } from 'element-plus/es/locales.mjs';
import CryptoJS from 'crypto-js';
// import axios from 'axios';
const axios = inject('axios') //注入 axios
// 顶部导航栏菜单选中索引
const activeIndex = ref('/login')
// 创建路由对象，用于编程式导航
const router = useRouter()

// 表单数据
interface RuleForm {
    uname: string
    upassword: string
    account: String     //账号
    //sex: string
    email: String
    roleid: '',   // 用户类型
    //remark: String
    //count: string
    //date1: string   // 日期选择器
    //date2: string   // 日期选择器
    //delivery: boolean   
    //location: string    
    //type: string[]
    //resource: string
    //desc: string    // 文本域
    emailCode: String
}
//创建了一个响应式引用formSize，用来存储表单组件的尺寸，初始值设为'default'，并且这个尺寸值是类型安全的，受到TypeScript的类型约束
const formSize = ref<ComponentSize>('default')
//ue 3中的一个响应式函数，用于创建一个名为ruleFormRef的响应式引用。它将引用类型(FormInstance)的初始值设置为undefined，并且当其值被修改时，相关的依赖也会自动更新。
const ruleFormRef = ref<FormInstance>()
//表单数据（注册数据）
const ruleForm = reactive<RuleForm>({
    uname: '',
    upassword: '',
    account: '',    //账号
    //sex: '',
    email: '',
    roleid: '',
    //remark: '',
    //count: '',
    //date1: '',
    //date2: '',
    //delivery: false,
    //location: '',
    //type: [],
    //resource: '',
    //desc: '',
    emailCode: ''
})

const userTypeOptions = ref([]); // 存放用户类型选项
onMounted(async () => {
    try {
        const response = await axios.get('http://localhost:8080/user/getUserRoleList'); // 替换为实际的API地址
        console.log('获取用户类型成功：', JSON.stringify(response.data, null, 2));
        userTypeOptions.value = response.data; // 假设返回的数据格式为 [{ label: ..., value: ... }, ...]
        console.log('获取用户类型成功：', JSON.stringify(userTypeOptions.value, null, 2));
    } catch (error) {
        console.error('获取用户类型失败:', error);
    }
});




//表单校验规则
const rules = reactive<FormRules<RuleForm>>({
    account: [
        //这条规则表示uname字段是必填的。当该字段失去焦点(trigger: 'blur')时，如果字段值为空，则会显示错误消息“用户名不能为空”。
        { required: true, message: '账号不能为空', trigger: 'blur' },

        { min: 3, max: 15, message: '需要在3-15个字符之间', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                const regex = /^[A-Za-z0-9]+$/; // 只允许英文字符和数字
                if (!regex.test(value)) {
                    callback(new Error('账号不能包含中文字符'));
                } else {
                    callback();
                }
            },
            trigger: 'blur',
        },
    ],
    // 密码长度: 至少 8 位，最多 12 位。
    // 首字符: 第一个字符必须是英文字母。
    // 字符组成: 包含至少一个英文字母、一个数字和一个特殊字符。
    upassword: [
        { required: true, message: '密码不能为空！', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value.length < 8 || value.length > 12) {
                    callback(new Error('密码长度必须在8到20位之间！'));
                    return;
                }
                // if (!/^[A-Za-z]/.test(value)) {
                //     callback(new Error('密码的第一位必须为英文字母！'));
                //     return;
                // }
                if (!/[A-Za-z]/.test(value)) {
                    callback(new Error('密码必须包含至少一个英文字母！'));
                    return;
                }
                if (!/[0-9]/.test(value)) {
                    callback(new Error('密码必须包含至少一个数字！'));
                    return;
                }
                if (!/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
                    callback(new Error('密码必须包含至少一个特殊字符！'));
                    return;
                }
                callback(); // 校验通过
            },
            trigger: 'blur',
        },
    ],
    uname: [
        { required: true, message: '昵称不能为空！', trigger: 'blur' }
    ],
    // sex: [
    //     {
    //         required: false,
    //         trigger: 'change',
    //     },
    // ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱' },
    ],
    // remark: [
    //     { required: false, },
    // ],
    emailCode: [
        { required: true, message: '验证码不能为空！', trigger: 'blur' },
        { min: 6, max: 6, message: '验证码必须为6位', trigger: 'blur' },
    ]
})
//注册按钮组件
const submitForm = async (formEl: FormInstance | undefined) => {
    console.log('submit:' + JSON.stringify(ruleForm))
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            register() // 用户注册操作
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
            alert('请输入正确的信息')
        }
    })
}
// 重置按钮事件
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

// 发送验证码的状态
const isCounting = ref(false);
const countdown = ref(60); // 倒计时的秒数
let countdownInterval: ReturnType<typeof setInterval> | null = null;


// 发送验证码
const sendCode = async () => {
    if (isCounting.value) return; // 如果正在倒计时，则不再发送验证码
    console.log("发送验证码");
    try {
        const response = await axios.get(`http://localhost:8080/user/sendRegisterEmail/${ruleForm.email}`);
        console.log(response);
        console.log(response.data.code);
        if (response.data.code == 200) {
            // 启动倒计时
            isCounting.value = true;
            countdown.value = 60; // 重置倒计时
            countdownInterval = setInterval(() => {
                countdown.value--;
                if (countdown.value <= 0) {
                    clearInterval(countdownInterval!);
                    isCounting.value = false; // 重置计时状态
                }
            }, 1000);
            ElMessage({
                message: '验证码已发送！',
                type: 'success',
                plain: true
            });
        }
        else {
            ElMessage({
                message: '验证码发送失败，错误代码：' + response.data.code,
                type: 'error',
                plain: true
            });
        }
    } catch (error) {
        ElMessage({
            message: '验证码发送失败！',
            type: 'error',
            plain: true
        });
        console.error(error); // 提供更多的错误调试信息
    }
};

// 用户注册函数
function register() {
    console.log("注册信息：" + JSON.stringify(ruleForm))
    axios({
        method: 'post',
        url: 'http://localhost:8080/user/register',
        headers: {
            'Content-Type': 'application/json'
        },
        data: ruleForm
    })
        .then(function (response) {
            if (response.data.code == '200') {
                // 提示信息
                ElMessage({
                    message: response.data.message,
                    type: 'success',
                    plain: true
                })
                // 注册成功，跳转至登录页面
                router.push('/login')
            }else if(response.data.code == '400'){
                ElMessage({
                    message: response.data.message,
                    type: 'error',
                    plain: true
                })
            }
        })
        .catch(function (error) {
            ElMessage({
                message: '注册失败！',
                type: 'error',
                plain: true
            })
        })
}


// //表单数据
// interface FormData {
//     account: string;
//     phone: string;
//     Upassword: string;
// }
// // 表单数据
// const formData = reactive<FormData>({
//     account: '',
//     Upassword: '',
// })
// //同意用户协议
// const terms = ref(false)

// const handleSubmit = async () => {
//     if (!terms.value) {
//         alert('请先同意用户协议和隐私条款');
//         return;
//     }
//     try {
//         console.log({
//             account: formData.account,
//             Upassword: formData.Upassword,
//         });
//         const response = await axios.post('http://localhost:8080/usertlogin', {
//             account: formData.account,
//             upassword: formData.Upassword,
//         }, {
//             headers: {
//                 'Content-Type': 'application/json',
//             }
//         });
//         //// 假设响应格式为 { code: number, message: string, token: string, userInfo: object }
//         if (response.data.code === 200) {
//             // 登录成功，将 token 加密后存储到本地存储中
//             const token = response.data.token;
//             // 使用一个密钥进行加密（务必保密，不要Hardcode在代码中）
//             const secretKey = 'your_secret_key'; // 替换为一个安全的密钥
//             const encryptedToken = CryptoJS.AES.encrypt(token, secretKey).toString(); // 加密

//             localStorage.setItem('token', encryptedToken); // 存储加密后的Token
//             // 跳转到首页
//             router.push('/');
//         } else {
//             alert(response.data.message || '登录失败'); //使用返回的错误信息
//         }
//     } catch (error) {
//         console.error(error);
//         alert('出现错误，请稍后重试');
//     }

// }
// 在组件卸载时清除计时器
onUnmounted(() => {
    clearInterval(countdownInterval);
});
</script>

<template>
    <div class="container">
        <div class="background">
            <div class="form-container">
                <h2 style="margin-top: 0px;">注册账户</h2>
                <!-- <form @submit.prevent="handleSubmit">
            <label for="account">请输入账号</label>
            <input type="text" id="account" v-model="formData.account" placeholder="请输入账号" required />
  
            <label for="password">请输入密码</label>
            <input type="password" id="password" v-model="formData.Upassword" placeholder="请输入密码" required />
  
            <button type="submit">登录</button>
            <div class="terms">
              <label id="agreement">
                <input type="checkbox" id="terms" v-model="terms" />
                <span><strong class="tint">登录即代表您同意</strong><strong class="bold">用户协议</strong><strong class="tint"> 和
                  </strong> <strong class="bold">隐私条款</strong></span>
              </label>
            </div>
          </form> -->
                <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                    class="demo-ruleForm" :size="formSize" status-icon>
                    <el-form-item label="请输入账号" prop="account">
                        <el-input v-model="ruleForm.account" />
                    </el-form-item>
                    <el-form-item label="请输入密码" prop="upassword">
                        <el-tooltip class="item" effect="dark"
                            content="密码规则：密码8~12位；包含至少一个英文字母、数字和特殊字符" placement="top-start">
                            <el-input v-model="ruleForm.upassword" type="password" show-password />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="请输入昵称" prop="uname">
                        <el-input v-model="ruleForm.uname" />
                    </el-form-item>
                    <el-form-item label="用户类型" prop="roleid">
                        <el-select v-model="ruleForm.roleid" placeholder="请选择用户类型">
                            <el-option
                                v-for="option in userTypeOptions"
                                :key="option.roleid"
                                :label="option.rolename"
                                :value="option.roleid"
                            />
                        </el-select>
                    </el-form-item>
                    <!-- // -->
                    <!-- <el-form-item label="性别" prop="sex">
                        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="请输入邮箱" prop="email" class="email-input-wrapper">
                        <el-input v-model="ruleForm.email" class="email-input" />
                        <el-button :disabled="isCounting" type="primary" @click="sendCode" style="width: 80px;">
                            {{ isCounting ? `${countdown}秒后重发` : '发送验证码' }}
                        </el-button>
                    </el-form-item>
                    <el-form-item label="请输入验证码" prop="emailCode">
                        <el-input v-model="ruleForm.emailCode" />
                    </el-form-item>
                    <!-- <el-form-item label="个人简介" prop="remark">
                        <el-input v-model="ruleForm.remark" type="textarea" />
                    </el-form-item> -->
                    <!-- <el-form-item prop="role" id="agreement">
                        <input type="checkbox" id="terms" v-model="terms" style="width: 15px; height: 15px; margin-bottom: 0px;margin-right: 5px;"/>
                        <span><strong class="tint">登录即代表您同意</strong><strong class="bold">用户协议</strong><strong
                                class="tint"> 和
                            </strong> <strong class="bold">隐私条款</strong></span>
                    </el-form-item> -->
                    <el-form-item>
                        <div class="content">
                            <el-button type="primary" @click="submitForm(ruleFormRef)" class="submit-button">
                                提交
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)" class="reset-button">重置</el-button>
                        </div>

                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('../../public/images/Userlogin.png');
  /* 设置背景图片大小 */
  background-size: cover;/* 填充整个容器 */
    position: relative;
}

.background {
    position: relative;
}

.form-container {
    background: rgba(255, 255, 255, 0.6); /* 半透明背景 */
    padding: 25px;
    height: 440px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 500px;
    backdrop-filter: blur(10px); /* 模糊效果 */
}

h2 {
    margin-bottom: 20px;
    text-align: center;
    margin-top: 20px;
}

label {
    margin: 10px 0 5px;
    display: block;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #673ab7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #5e35b1;
}

#agreement {
    display: inline-block;
    width: 100%;
    /* margin-top: 65px; */
    /* 内元素居中 */
    background-color: aqua;


}

.terms {
    text-align: center;
    margin-top: 10px;
}

.bold {
    font-weight: bold;
    color: black;
    /* 将文本设为黑色 */
}

.tint {
    color: #888;
    font-weight: normal;
}

.terms #terms {
    float: left;
    width: 25px;
    background-color: #5e35b1;
    /* 居中 */
    transform: center;
}

/* span {
    float: left;
} */


.email-input-wrapper {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
}

.email-input {
    flex: 1;
    /* 输入框占据剩余空间 */
    margin-right: 10px;
    /* 输入框与按钮之间的间距 */
}

.content {
    width: 100%;
    display: flex;
    /* 内元素水平居中 */
    justify-content: center;

}

.submit-button,
.reset-button {
    width: 25%;
}

.reset-button {
    margin-left: 10px;
    /* 添加左边距以便不同按钮之间有点间距 */
}
</style>